<script setup>
import moment from 'moment'
import { computed, ref } from 'vue'

const emit = defineEmits(['reply', 'like', 'view'])

const props = defineProps([
    'avatar',
    'title',
    'time',
    'content',
    'right',
    'label',
    'reply',
    'childrenCount',
    'depth',
    'like',
    'likeCount'
])

const formatTime = computed(() => moment(props.time).format('YYYY-MM-DD'))

const isExpand = ref(props.depth <= 0)

const expandPrompt = computed(() => (isExpand.value ? '折叠' : '展开'))

const showViewButton = computed(() => props.childrenCount > 0)

const showReplyButton = computed(() => props.depth <= 2)

const view = () => {
    isExpand.value = !isExpand.value
    emit('view')
}
</script>

<template>
    <div class="message" :class="right && 'message_reverse'">
        <div class="message_photo">
            <img class="message_avatar" :src="avatar" />
        </div>
        <div class="message_wapper">
            <div class="message_title">
                <div class="message_nickname">
                    <span class="message_label" v-if="label">作者</span>
                    <span class="message_value">{{ title }}</span>
                </div>
                <div class="message_lastUpdateTime" v-if="time">更新于 {{ formatTime }}</div>
            </div>
            <div class="message_content">{{ content }}</div>
            <div class="message_actions">
                <button
                    class="message_button message_2"
                    @click="emit('like')"
                    :class="like && 'message_like'">
                    <Icon name="bi-hand-thumbs-up-fill" />
                    <span class="message_button_like">23424{{ likeCount }}</span>
                </button>
                <button class="message_button" @click="emit('reply')" v-if="showReplyButton">
                    <Icon name="bi-chat-dots-fill" />
                    <span class="message_button_reply">回复</span>
                </button>
                <button
                    class="message_button message_button_expand"
                    @click="view"
                    v-if="showViewButton">
                    <span>{{ expandPrompt }}评论 {{ childrenCount }} 条</span>
                </button>
            </div>
            <div v-show="isExpand">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<style scoped>
.message {
    display: flex;
    justify-content: flex-start;
    padding-top: 20px;
    width: 100%;
}

.message-me {
    flex-direction: row-reverse;
}

.message_avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.message_label {
    font-size: 13px;
    padding: 0.125rem 0.5rem;
    background-image: linear-gradient(to right, #ffc73e, #ffdd36);
    border-radius: 0.25rem;
    color: #fffefe;
}

.message_value {
    font-weight: bold;
}

.message_wapper {
    margin-left: 0.5rem;
    flex: auto;
}

.message_title {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 0.75rem;
}

.message_label {
    margin-right: 0.5rem;
}

.message_lastUpdateTime {
    font-size: 0.75rem;
}

.message_content {
    white-space: pre-wrap;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 0.25rem;
    width: fit-content;
}

.message_actions {
    margin-top: 0.5rem;
}

.message_button {
    font-size: 13px;
    border-radius: 4px;
    color: #828282;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}

.message_2 {
    width: 50px;
}

.message_like {
    color: #0d6efd;
}

.message_button_like {
    margin-left: 0.25rem;
}

.message_button_reply {
    margin-left: 0.5rem;
}

.message_button_expand {
    margin-left: 1rem;
}
</style>
